<template>
	<view class="wrap">
		<movable-area>
			<view class="header" :style="{ 'padding-top': heightBar + 'rpx' }">
				<view class="headerBoxsBar" :style="{ top: BarHeight + 'rpx', left: '30rpx' }" @click="goBack">
					<view>我的</view>
				</view>
				<view class="userinfo">
					<view class="userinBoxs">
						<!-- v-if="UserInof.phone && imgUrlShow" -->
						<view class="image" @click="navTo('info')" v-if="imgUrlShow">
							<image :src="imgUrl + 'user/morenuser.svg'"></image>
						</view>
						<view class="info">
							<view class="username">{{ UserInof.phone || "欢迎来到紫菜云" }}
							</view>
							<view class="usercode">{{ UserInof.nickName || "登录后获取更多信息"}}</view>
						</view>
					</view>
					<view class="LoginBtn" v-if="!UserInof.phone" @click="loginIn">
						<view class="LoginBoxs">去登录</view>
					</view>
					<view class="LoginBtn" v-if="UserInof.phone" @click="LgOutLogin">
						<view class="LoginBoxs">退出登录</view>
					</view>
				</view>
				<view class="CompanyBoxs">
					<view class="CompanyCons">
						<view class="CompanyPic">
							<image :src="imgUrl + 'user/qiye.svg'" v-if="imgUrlShow"></image>
						</view>
						<view class="CompanyQiyeBoxs">
							<view class="CompanyBableBoxs">
								<view class="CompanyBable">企业</view>
								<view class="StatusPic" v-if="CompanyForm.examineStatus==='SHTG'">
									<image :src="imgUrl + 'user/shenhetongguo.svg'" v-if="imgUrlShow"></image>
								</view>
								<view class="StatusPic" v-if="CompanyForm.examineStatus==='DSH'">
									<image :src="imgUrl + 'user/shenhezhong.svg'" v-if="imgUrlShow"></image>
								</view>
								<view class="StatusPic" v-if="CompanyForm.examineStatus == 'SHBH'">
									<image :src="imgUrl + 'user/qiyebohui.svg'" v-if="imgUrlShow"></image>
								</view>
							</view>
							<view class="CompanyNoQIye">
								{{CompanyForm.enterpriseName ||'暂未加入任何企业'}}
							</view>
						</view>
					</view>
					<view v-if="(!UserInof.userExt)||(CompanyForm.examineStatus == '')||(CompanyForm.examineStatus == 'SHBH')" class="ComeToQiye" @click="ComeInfo">
						<text class="ComeToQiyeLable" v-if="(CompanyForm.examineStatus == 'SHBH')||(UserInof.userExt&&CompanyForm.examineStatus == '')">去认证</text>
						<text class="ComeToQiyeLable" v-else >企业认证</text>
						<u-icon name="arrow-right" color="#C9CDD4 "></u-icon>
					</view>
				</view>
			</view>
			<view class="CardBoxs">
				<view class="CardTitles">我的服务</view>
				<view class="CardCons">
					<view class="CardItems" v-for="(item, index) in CardLIsts" :key="index" @click="ChangeList(item)"
						:style="{ 'padding-top': item.top + 'rpx' }">
						<view class="CardTop">
							<view class="CardPic">
								<image :src="imgUrl + item.img" v-if="imgUrlShow"></image>
							</view>
							<view class="CardText">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="InfoTop" :style="{ 'padding-bottom': tabBarHeight + 'px' }">
				<view class="InfoList">
					<view>有疑问可拨打客服热线</view>
					<view class="InfoPic">
						<image :src="imgUrl + 'user/rexian.svg'" v-if="imgUrlShow"></image>
					</view>
					<view class="InfoTexts">400-636-9009</view>
				</view>
			</view>
			<movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease" :x="xNumber"
				:y="yNumber">
				<view class="kefu_fixed">
					<button type="default" open-type='contact' class="kefu-btns">
						<u-icon name="kefu-ermai" color="#FFFFFF" size="28"></u-icon>
						<view class="u-text-center" @click="showPopup=true">
							<text>客服</text>
						</view>
					</button>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>
<script>
	/**
	 * 我的
	 */
	import store from "@/store";
	import {
		wxLogout,
		simpleUserExtDetail
	} from "@/api/user/index.js";
	export default {
		data() {
			return {
				BarHeight: null,
				heightBar: null,
				iconSize: 38,
				CardLIsts: [{
						img: "user/jiuhuo.svg",
						name: "我的旧货",
						url: "/PageA/leaveUnused/leaveUnused",
						top: 32
					},
					{
						img: "user/qiugou.svg",
						name: "我的求购",
						url: "/PageC/myPurchaseRequest/myPurchaseRequest",
						top: 32
					},
					{
						img: "user/baojia.svg",
						name: "我的报价",
						url: "/PageC/myQuote/myQuote",
						top: 32
					},
					{
						img: "user/jingjia.svg",
						name: "我的竞买",
						url: "/PageA/MyBidding/index",
						top: 32
					},
					{
						img: "user/jingpai.svg",
						name: "我的竞卖",
						url: "/PageA/MyAuction/index",
						top: 40
					},
					{
						img: "user/baozhengjin.svg",
						name: "我的保证金",
						url: "/PageA/MyDeposit/index",
						top: 40
					},
					{
						img: "user/xinxi.svg",
						name: "我的信息",
						url: "/PageA/login/ImproveInfo",
						top: 40
					}
				],
				imgUrl: "",
				imgUrlShow: false,
				tabBarHeight: 0,
				UserInof: {},
				xNumber: 375,
				yNumber: 500,
				CompanyForm:{
					enterpriseName:''
				}
			};
		},
		onLoad(val) {
			if (val.shareUserId) {
				uni.setStorageSync('shareUserId', val.shareUserId)
			}
		},
		onShow() {
			if (
				typeof this.$mp.page.getTabBar === "function" &&
				this.$mp.page.getTabBar()
			) {
				this.$mp.page.getTabBar().setData({
					selected: 4,
				});
			}
			this.UserInof = uni.getStorageSync("UserInof");
			let custom = uni.getMenuButtonBoundingClientRect(); // 获取右上角胶囊信息
			let system = uni.getSystemInfoSync(); // 获取设备信息
			if (650 > system.screenHeight) {
				this.BarHeight = Number(system.statusBarHeight) * 2 + 40;
			} else if (system.screenHeight > 900) {
				this.BarHeight = Number(system.statusBarHeight) * 2 + 10;
			} else if (900 > system.screenHeight) {
				this.BarHeight = Number(system.statusBarHeight) * 2 + 20;
			}
			this.heightBar = Number(system.statusBarHeight * 2) + 84;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			this.xNumber = systemInfo.safeArea.width * 0.9
			this.yNumber = systemInfo.safeArea.height * 0.72
			// 计算tabBar高度
			const tabBarHeight = systemInfo.screenHeight - systemInfo.windowHeight + 12;
			this.tabBarHeight = tabBarHeight + 110;
			this.imgUrl = getApp().globalData.imgUrl;
			this.imgUrlShow = true;
			if(this.UserInof.userExt===true){
				this.getDetail()
			}
		},
		methods: {
			//分享小程序
			onShareAppMessage(e) {
				let UserInof = uni.getStorageSync("UserInof");
				return {
					// 自定义分享内容
					title: '找货卖货就上紫菜圈',
					path: `/pages/sys/user/index?shareUserId=${UserInof.userId}`,
					imageUrl: ''
				};
			},
			// 分享到朋友圈
			onShareTimeline() {
				let UserInof = uni.getStorageSync("UserInof");
				return {
					title: '找货卖货就上紫菜圈',
					path: `/pages/sys/user/index?shareUserId=${UserInof.userId}`,
					imageUrl: ''
				};
			},
			//获取详情
			getDetail(){
				simpleUserExtDetail({userId:this.UserInof.userId})
					.then((res) => {
						this.CompanyForm = res.data[0]
				})
			},
			LgOutLogin() {
				wxLogout({}).then((res) => {
					if (res.code === 200) {
						store.dispatch("auth/LOGOUT");
						setTimeout(() => {
							uni.showToast({
								title: "退出成功",
								icon: "none",
							});
						}, 500);
						this.CompanyForm = {}
						this.UserInof = {};
					}
				});
			},
			//企业认证
			ComeInfo(){
				if (this.UserInof.phone) {
					uni.navigateTo({
						url: '/PageA/login/ImproveInfo'
					});
				} else {
					uni.showToast({
						title: "请先登录",
						icon: "none",
						duration: 2000,
					});
					setTimeout(function() {
						uni.navigateTo({
							url: "/PageA/login/index",
						});
					}, 500);
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			ChangeList(item) {
				if (this.UserInof.phone) {
					uni.navigateTo({
						url: item.url,
					});
				} else {
					uni.showToast({
						title: "请先登录",
						icon: "none",
						duration: 2000,
					});
					setTimeout(function() {
						uni.navigateTo({
							url: "/PageA/login/index",
						});
					}, 500);
				}
			},
			loginIn() {
				uni.navigateTo({
					url: "/PageA/login/index",
				});
			},
		},
	};
</script>
<style lang="scss">
	button::after {
		border: none;
	}

	.kefu-btns /deep/ .u-icon--right {
		padding-left: 13rpx;
	}

	@import "index.scss";

	page {
		background-color: #F7F8FC;
	}

	movable-area {
		height: 90vh;
		width: 100vw;
	}

	movable-view {
		width: 80rpx;
		height: 200rpx;
	}

	.kefu_fixed {
		width: 80rpx;
		background: #2979ff;
		padding: 15rpx 5rpx;
		border-radius: 80rpx;
		z-index: 100;
		margin-top: 100rpx;
		text-align: center;
		overflow: hidden;
	}

	.kefu-btns {
		background: #2979ff !important;
		outline: none;
		border: none !important;
		padding: 0;
	}

	.u-text-center {
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>